<template>
  <div class="container">
    <!-- search Bar -->
    <div class="searchBar">
      <div class="gps">
        <a href="/pages/package_mall/select_city_new/main">
          <img src="https://img.ameimeika.com/h5_images/lifebeauty/3/gps.png"
               alt
               class="img" />
          {{province_name}}
        </a>
      </div>
      <div class="content">
        <input type="text"
               placeholder="大家都在搜全脸填充"
               class="search-inp"
               @click="search_focus()"
               disabled />
        <img class="search-icon"
             v-if="imgUrl"
             :src="imgUrl+'h5_images/mp_images/mp_2.0/shouye/sousuokuangneisousuo@2x.png'" />
      </div>
      <div class="msg">
        <a href="/pages/package_main/message_list/main"
           class="msgbox">
          <img :src="imgUrl+'h5_images/mp_images/mp_3.0/indexpage/ic_information@3x.png'"
               v-if="imgUrl"
               class="img" />
          <div style="clear:both;"></div>
        </a>
        <div class="tip"
             v-if="has_msg"></div>
      </div>
    </div>
    <scroll-view :scroll-y="true"
                 :lower-threshol="150"
                 :style="{'height': '100%'}"
                 @scroll="scroll"
                 @scrolltolower="infiniteScroll">
      <!-- banner -->
      <div class="banner"
           id="banner"
           :style="{'margin-top:80px':tag_list.length>0,'margin-top:44px':tag_list.length<=0}">
        <swiper :indicator-dots="true"
                :autoplay="true"
                :circular="true"
                :interval="2000"
                :duration="500"
                indicator-color="rgba(255, 255,255,.5)"
                indicator-active-color="rgba(255, 255,255,1)">
          <block v-for="(item, index) in imgUrls"
                 :key="index">
            <swiper-item @tap="to_detail(item)">
              <image :src="imgUrl+item.image"
                     v-if="imgUrl&&item.image"
                     class="slide-image"
                     :lazy-load="true" />
            </swiper-item>
          </block>
        </swiper>
      </div>

      <!-- nav -->
      <ul class="nav"
          :style="{'backgroundImage':bg_nav?'url('+bg_nav+')':''}">
        <li class="nav-item"
            v-for="(item, index) in nav"
            :key="index"
            @tap="select_nav(item)">
          <div class="image">
            <img :src="imgUrl+item.image"
                 v-if="imgUrl&&item.image"
                 alt
                 class="img"
                 :lazy-load="true" />
          </div>
          <h4 class="nav-msg">{{item.name}}</h4>
        </li>
      </ul>

      <!-- 项目分类列表 -->
      <div class="project-class"
           v-if="project_rates.length>0">
        <swiper :current="current_index"
                @change="project_class_change"
                :style="{'height':project_rates.length>5?'180px':'90px'}">
          <block>
            <swiper-item v-for="(item, index) in project_class"
                         :key="index">
              <div class="list">
                <div class="list-item"
                     v-for="(val, i) in item"
                     :key="i"
                     @tap="to_class_detail(val)">
                  <div class="image">
                    <img :src="imgUrl+val.image"
                         mode="widthFix"
                         v-if="imgUrl&&val.image"
                         class="img" />
                  </div>
                  <div class="msg">{{val.name}}</div>
                </div>
              </div>
            </swiper-item>
          </block>
        </swiper>
        <div class="indicator-dots">
          <div class="indicators">
            <div class="indicator-point"
                 :class="{'active':index==current_index}"
                 v-for="(item, index) in project_class"
                 :key="index"></div>
          </div>
        </div>
      </div>
      <!-- 名医 院库 -->
      <div class="beauty-nav"
           :style="{'backgroundImage':bg_nav?'url('+bg_nav+')':''}"
           v-if="hos_doc_arr.length>0">
        <div class="beauty-item"
             v-for="(item, index) in hos_doc_arr"
             :key="index"
             @tap="to_detail(item)">
          <img :src="imgUrl+item.image"
               v-if="imgUrl"
               alt
               class="img" />
        </div>
      </div>
      <!-- adv -->
      <div class="adv"
           :style="{'backgroundImage':bg_adv?'url('+bg_adv+')':'#fff'}">
        <div class="main-adv"
             @tap="to_detail(main_adv)"
             v-if="main_adv!=''">
          <img :src="main_adv.ad_image?imgUrl + main_adv.ad_image:'/static/err.png' "
               v-if="imgUrl&&main_adv.ad_image"
               alt
               class="image"
               mode="widthFix" />
        </div>
        <div class="advs clearfix"
             v-if="adv2!=''&&adv3!=''&&adv4!=''">
          <div class="adv-item"
               @tap="to_detail(adv2)">
            <img :src="adv2.ad_image?imgUrl+adv2.ad_image:'/static/err.png'"
                 v-if="imgUrl&&adv2.ad_image"
                 alt
                 class="image"
                 :lazy-load="true" />
          </div>
          <div class="adv-item"
               @tap="to_detail(adv3)">
            <img :src="adv3.ad_image?imgUrl+adv3.ad_image:'/static/err.png'"
                 v-if="imgUrl&&adv3.ad_image"
                 alt
                 class="image"
                 :lazy-load="true" />
          </div>
          <div class="adv-item"
               @tap="to_detail(adv4)">
            <img :src="adv4.ad_image?imgUrl+adv4.ad_image:'/static/err.png'"
                 v-if="imgUrl&&adv4.ad_image"
                 alt
                 class="image"
                 :lazy-load="true" />
          </div>
        </div>
        <div class="main-adv bottom-adv"
             @tap="to_detail(adv5)"
             v-if="adv5!=''"
             :lazy-load="true"
             mode="widthFix">
          <img :src="adv5.ad_image? imgUrl + adv5.ad_image:'/static/err.png' "
               v-if="imgUrl&&adv5.ad_image"
               alt
               class="image" />
        </div>
      </div>
      <!-- activity-unit -->
      <ul class="activity-unit clearfix">
        <li class="activity-item clearfix"
            v-for="(item, index) in activity_arr"
            :key="index"
            :style="{'backgroundImage':bg_project||bg_goods?'url('+(item.goods==null?bg_project:bg_goods)+')':''}">
          <div class="main_adv"
               @tap="to_detail(item)">
            <img :src="imgUrl+item.image"
                 v-if="imgUrl&&item.image"
                 alt
                 class="img"
                 mode="widthFix" />
          </div>
          <!-- 项目列表 -->
          <div class="projects clearfix"
               v-if="item.projects!=null && item.projects.length>0">
            <scroll-view scroll-x
                         :style="{'width': '100%'}">
              <ul class="list clearfix"
                  :style="{'width': item.projects.length*240+'rpx'}">
                <li class="projects-item"
                    v-for="(val, index1) in item.projects"
                    :key="index1">
                  <a :href="'/pages/project_detail/main?id=' +val.id">
                    <div class="projects-image">
                      <img :src="imgUrl+val.image"
                           v-if="imgUrl&&val.image"
                           class="img" />
                      <div class="tip"
                           v-if="val.activity_status==1||val.activity_status==2">
                        {{val.activity_status==1?'即将开抢':""}}
                        {{val.activity_status==2?'抢购中':""}}
                      </div>
                    </div>
                    <div class="projects-name">{{val.name}}</div>
                    <div class="price_projects clearfix">
                      <span v-if="val.activity_status==1||val.activity_status==3">优惠价</span>
                      <span class="tip">￥ {{val.activity_status==4?val.project_price:val.discounts}}</span>
                      <span v-if="val.activity_status==1||val.activity_status==3">起</span>
                    </div>
                  </a>
                </li>
              </ul>
            </scroll-view>
          </div>
          <!-- 商品列表 -->
          <div class="projects goods"
               v-if="item.goods!=null && item.goods.length>0">
            <scroll-view :scroll-x="true"
                         :style="{'width': '100%'}">
              <ul class="list clearfix"
                  :style="{'width': item.goods.length*240+'rpx'}">
                <li class="projects-item"
                    v-for="(val, index1) in item.goods"
                    :key="index1">
                  <a :href="'/pages/goods_detail/main?goods_id=' +val.id">
                    <div class="projects-image">
                      <img :src="imgUrl+val.thumb_image"
                           v-if="imgUrl&&val.thumb_image"
                           alt
                           class="img"
                           mode="widthFix" />
                      <div class="tip"
                           v-if="val.activity_status&&val.activity_status!=3">
                        {{val.activity_status==1?'即将开抢':""}}
                        {{val.activity_status==2?'抢购中':""}}
                      </div>
                    </div>
                    <div class="projects-name">{{val.title}}</div>
                    <div class="price_goods clearfix">
                      <div class="price-group clearfix">
                        <div class="icon">￥</div>
                        <div class="num">{{val.price}}</div>
                      </div>
                    </div>
                  </a>
                </li>
              </ul>
            </scroll-view>
          </div>
        </li>
      </ul>
      <!-- project-list -->
      <div class="character_Medical">
        <img :src="imgUrl+'h5_images/mp_images/3.15/jingpin1.png'"
             v-if="base_img"
             mode="widthFix"
             class="character_Medical_img" />
      </div>

      <div class="project-list">
        <div class="malltab"
             id="malltab"
             v-if="tab_arr.length>0"
             :style="{'top:79px':tag_list.length>0,'top:43px':tag_list.length<=0}">

          <mall-tab :tab_arr="tab_arr"
                    @toggle_tab="toggle_tab"></mall-tab>
        </div>
        <!-- 精选好店列表 -->
        <!-- 筛选框 -->
        <!-- <div class="store-filter"
             v-if="tab_id==0">
          <div class="filter-item"
               @tap.stop="toggle_filter (0)">
            距离最近
          </div>
          <div class="filter-item"
               @tap.stop="toggle_filter (1)">
            全城
          </div>
          <div class="filter-item"
               @tap.stop="toggle_filter (2)">
            智能排序
          </div>
        </div>-->
        <!-- <storeList v-if="tab_id==0&&store_arr.length>0"
        :store_arr="store_arr"></storeList>-->
        <!-- 品质医美项目列表 -->
        <mallList :mallList="mallList"
                  v-if="mallList.length>0"></mallList>
        <p class="bottomtext"
           v-if="isbottom">
          <span class="line"></span>因为甄选，所以珍稀
          <span class="line"></span>
        </p>
        <div class="empty"
             v-if="mallList.length==0">
          <img :src="base_img+'/mp_3.1.6/enpty.png'"
               v-if="base_img"
               mode="widthFix"
               alt=""
               class="img">
          <div class="msg">
            即将上线，敬请期待
          </div>
        </div>
      </div>
    </scroll-view>
    <div class="model"
         v-if="show_model">
      <div class="inner"
           v-for="(item, key) in window_arr"
           :key="key"
           v-if="item.show">
        <img :src="imgUrl+item.image"
             v-if="imgUrl&&item.image"
             alt
             class="image"
             mode="widthFix"
             :lazy-load="true"
             @tap.stop="to_detail(item)" />
        <div class="close"
             @tap.stop="close(item)">X</div>
      </div>
    </div>
    <!--店铺 筛选框 -->
    <!-- <div class="filter-model"
         v-if="show_filter">
      <div class="filter-content">
        <div class="filter-top">
          <div class="filter-item"
               @tap.stop="toggle_filter (0)">
            距离最近
          </div>
          <div class="filter-item"
               @tap.stop="toggle_filter (1)">
            全城
          </div>
          <div class="filter-item"
               @tap.stop="toggle_filter (2)">
            智能排序
          </div>
        </div>
        <div class="filter-list"
             v-if="filter_type==1">
          <div class="list-left">
            <div class="list-item"
                 :class="{'active':city_selcted.id == item.id}"
                 @tap.stop="toggle_city(item)"
                 v-for="(item, i) in city_arr"
                 :key="i">{{item.name}}</div>
          </div>
          <div class="list-right">
            <div class="list-item"
                 :class="{'active':area_selected.id == item.id}"
                 @tap.stop="toggle_area(item)"
                 v-for="(item, key) in city_selcted.area"
                 :key="key">{{item.name}}</div>

          </div>
        </div>

        <div class="filter-list"
             v-if="filter_type==2">
          <div class="list-left">
            <div class="list-item"
                 :class="{'active':sort_selected.id == item.id}"
                 @tap.stop="toggle_sort(item)"
                 v-for="(item, i) in sort_arr"
                 :key="i">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>-->
    <!-- 首页显示客服按钮 -->
    <div class="call">
      <button class="btn"
              @tap="to_service()"></button>
      <img :src="base_img+'/mp_2.4/indexpage/kefu@2x.png'"
           v-if="base_img"
           class="image"
           mode="widthFix" />
    </div>
  </div>
</template>

<script>
import mallList from "@/components/mall_List/mall_List";
import storeList from "@/components/store_list/index";
import imageUrl from "@/assets/js/image.js";
import common from "@/assets/js/mmk_common.js";
import malltab from "@/components/mall_tab/mall_tab";
export default {
  data () {
    return {
      imgUrls: [],
      nav: [],
      project_rates: [],
      project_class: [],
      mallList: [],
      imgUrl: common.image_response,
      base_img: common.image_resource,
      scroll_top: 0,
      main_adv: "",
      adv2: "",
      adv3: "",
      adv4: "",
      adv5: "",
      advs: "",
      province_name: "湖北省",
      province_id: 13,
      isbottom: false,
      latitude: "",
      longitude: "",
      page: 1,
      pageSize: 10,
      show_model: false,
      has_msg: false,
      activity_arr: [],
      window_arr: [],
      bg_nav: "",
      bg_adv: "",
      bg_project: "",
      bg_goods: "",
      bg_title: "",
      hos_doc_arr: [],
      tab_arr: [],
      tab_id: 0,
      tab_value: "",
      menuTop: 1200,
      menuFixed: false,
      all_ok: false,
      current_index: 0, // 项目导航的当前的索引
      banner_height: 205,
      tag_list: [],
      store_arr: [],
      city_arr: [],
      area_arr: [],
      sort_arr: [],
      city_selcted: {},
      area_selected: {},
      sort_selected: {},
      sort_selected: {},
      //   筛选类型   0：距离最近   1：城市筛选   2：智能排序
      filter_type: 0,
      show_filter: false
    };
  },
  components: {
    mallList,
    mallTab: malltab,
    storeList
  },
  methods: {
    // 获取轮播图
    getBanner () {
      common.fly_post(
        "api/v4_2/home/banners",
        {
          cate_id: 1,
          province_id: this.province_id
        },
        result => {
          let res = result.data;
          if (res.status_code == 0) {
            //  wx.hideLoading();
            this.imgUrls = res.data;
          } else {
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: false
            });
            return false;
          }
        }
      );
    },
    // 获取导航栏
    getNav () {
      common.fly_post(
        "api/v4_2/movement_list",
        {
          position: 1,
          page: 1,
          pageSize: 5
        },
        result => {
          let res = result.data;
          if (res.status_code == 0) {
            this.nav = res.data.columns;
            this.hos_doc_arr = res.data.hospitalDoctors;
            this.tag_list = res.data.homeTags;
            let rates = res.data.cates;
            this.project_rates = rates;
            if (rates.length <= 10) {
              this.project_class[0] = rates;
            } else if (rates.length > 10) {
              if (rates.length <= 20) {
                this.project_class[0] = rates.slice(0, 10);
                this.project_class[1] = rates.slice(10);
              } else {
                this.project_class[0] = rates.slice(0, 10);
                this.project_class[1] = rates.slice(10, 20);
              }
            }
          } else {
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        }
      );
    },
    // 项目分类滑动
    project_class_change (e) {
      this.current_index = e.mp.detail.current;
    },
    // 跳转项目分类详情
    to_class_detail (item) {
      switch (item.project_cate_type) {
        case 0:
          // 全部分类
          wx.navigateTo({
            url: "/pages/package_projects/total_classification/main"
          });
          break;
        case 1:
          // 一级分类
          wx.navigateTo({
            url: `/pages/package_projects/two_level/main?obj=${JSON.stringify(
              item
            )}`
          });
          break;
        case 2:
          // 二级分类
          wx.navigateTo({
            url: `/pages/package_projects/two_level/main?obj=${JSON.stringify(
              item
            )}`
          });
          break;
        case 3:
          // 三级分类
          wx.navigateTo({
            url: `/pages/package_projects/three_level/main?cate_name=${
              item.name
              }&cate_id=${item.id}`
          });
          break;

        default:
          break;
      }
    },
    // 前往搜索
    // search() {
    //   wx.navigateTo({ url: "/pages/search/main" });
    // },
    // 获取广告位
    getadv () {
      common.fly_post(
        "api/v4_2/home/banners",
        {
          cate_id: 4,
          province_id: this.province_id
        },
        result => {
          let res = result.data;
          if (res.status_code == 0) {
            res.data.forEach(element => {
              switch (element.ad_id) {
                case 1:
                  this.main_adv = element;
                  break;
                case 2:
                  this.adv2 = element;
                  break;
                case 3:
                  this.adv3 = element;
                  break;
                case 4:
                  this.adv4 = element;
                  break;
                case 5:
                  this.adv5 = element;
                  break;
                default:
                  break;
              }
            });
          } else {
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        }
      );
    },
    // 滚定事件
    scroll (e) {
      let page_scroll = e.mp.detail.scrollTop;
    },
    // 选择省份
    selectAddress () {
      wx.navigateTo({ url: "/pages/package_mall/select_city_new/main" });
    },
    infiniteScroll () {
      if (this.mallList.length == 0 && this.page == 1 || this.isbottom) {
        return
      } else {
        this.page++;
        if (this.tab_id == 0) {
          this.get_storelist();
        } else {
          this.get_projectlist();
        }
      }

    },
    // 加载城市
    loadCity () {
      let that = this;
    },

    search_focus () {
      wx.navigateTo({ url: "/pages/package_main/search_index/main" });
    },
    // 获取定位
    get_location () {
      let that = this;
      wx.getLocation({
        type: "gcj02",
        success (res) {
          that.longitude = res.longitude; // 经度，浮点数，范围为-180~180，负数表示西经
          that.latitude = res.latitude; // 纬度，浮点数，范围为-90~90，负数表示南纬
          if (wx.getStorageSync("province_info")) {
            //   获取缓存城市
            that.get_tab();
            // that.get_storefilter()
          } else {
            //   加载城市
            wx.request({
              url:
                "https://api.map.baidu.com/geocoder/v2/?ak=QHRdba4oL7bXA0eVS2v1YdakVHEpXKjk&location=" +
                that.latitude +
                "," +
                that.longitude +
                "&output=json",
              data: {},
              header: {
                "Content-Type": "application/json"
              },
              success: function (res) {
                that.province_name = res.data.result.addressComponent.province;
                common.fly_post(
                  "api/v4_2/address/index",
                  {
                    is_open: 1
                  },
                  response => {
                    let result = response.data;
                    if (result.status_code == 0) {
                      let list = result.data;
                      list.forEach(item => {
                        if (item.name == that.province_name) {
                          that.province_id = item.id;
                          wx.setStorageSync(
                            "province_info",
                            JSON.stringify({
                              province_name: item.name,
                              province_id: item.id,
                              lgd: that.longitude,
                              ltd: that.latitude
                            })
                          );
                        }
                      });
                      that.get_tab();

                      // that.get_storefilter()
                    }
                  }
                );
              },
              fail: function (err) { }
            });
          }
        },
        fail () {
          wx.showToast({
            title: "无法获取地理位置",
            icon: "none",
            duration: 2000,
            mask: true
          });
          that.province_name = "湖北省";
          that.province_id = 13;
          that.get_tab();
        }
      });
    },
    select_nav (item) {
      common.to_detail(item);
    },
    // 查看详情
    to_detail (item) {
      let that = this;
      common.to_detail(item);
      setTimeout(() => {
        if (item.show) {
          that.close(item);
        }
      }, 2000);
    },
    // 获取消息列表
    get_msg () {
      let that = this;
      common.fly_post(
        "api/v4_2/user_messages/system_index",
        {
          page: 1,
          pageSize: 1000
        },
        result => {
          let res = result.data;
          if (res.status_code == 0) {
            let old_num = wx.getStorageSync("msg_num")
              ? wx.getStorageSync("msg_num") - 0
              : 0;
            let now_num = res.data.total - 0;
            if (now_num - old_num > 0) {
              this.has_msg = true;
            } else {
              this.has_msg = false;
            }
          }
        }
      );
    },
    // 获取活动
    get_activity () {
      common.fly_post(
        "api/v4_2/home_advert/index",
        { province_id: this.province_id },
        result => {
          let res = result.data;
          if (res.status_code == 0) {
            this.activity_arr = res.data;
          } else {
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: false
            });
          }
        }
      );
    },
    clickCategorize (item) {
      if (item.id > 1) {
        wx.navigateTo({
          url:
            `/pages/package_projects/categorize_list/main?url=` +
            item.id +
            "&project_name=" +
            item.name +
            "&type=2"
        });
      } else if (item.id < 1) {
        wx.navigateTo({
          url: `/pages/package_projects/oral/main?type=` + item.id
        });
      }
    },
    // 获取背景
    get_bg () {
      common.fly_post("api/v4_2/get_background", {}, result => {
        let res = result.data;
        if (res.status_code == 0 && this.imgUrl) {
          if (res.data.sort_bg) {
            this.bg_nav = this.imgUrl + res.data.sort_bg[0].bg_image;
          }
          if (res.data.marketing_bg) {
            this.bg_adv = this.imgUrl + res.data.marketing_bg[0].bg_image;
          }
          if (res.data.goods_bg) {
            this.bg_goods = this.imgUrl + res.data.goods_bg[0].bg_image;
          }
          if (res.data.project_bg) {
            this.bg_project = this.imgUrl + res.data.project_bg[0].bg_image;
          }
          if (res.data.title_bg) {
            this.bg_title = this.imgUrl + res.data.title_bg[0].bg_image;
          }
        }
      });
    },
    // 获取页面弹窗
    get_window () {
      let that = this;
      common.fly_post(
        "api/v4_2/index/pop_advert",
        {
          province_id: that.province_id
        },
        result => {
          let res = result.data;
          if (res.status_code == "0") {
            if (res.data.length > 0) {
              let arr = res.data;
              let pop = wx.getStorageSync("pop_obj");
              if (pop) {
                let date_now = new Date().getDate(),
                  new_arr = [],
                  pop_obj = pop;
                arr.forEach((item, index) => {
                  // 如果缓存没有对应的id 或者 对应id的日期小于今天的日期（说明今天没有弹出过） 就向新数组加入这一项
                  if (!pop[item.id] || pop[item.id] < date_now) {
                    new_arr.push(item);
                  }
                });
                //   如果新数组里面有内容
                if (new_arr.length > 0) {
                  new_arr.forEach((item, index) => {
                    item.show = false;
                    item.i = index;
                  });
                  // 首先展示第一个弹窗
                  new_arr[0]["show"] = true;
                  that.window_arr = new_arr;
                  that.show_model = true;
                  // 刷新缓存里面的数据
                  that.window_arr.forEach(item => {
                    pop_obj[item.id] = new Date().getDate();
                  });

                  wx.setStorage({
                    key: "pop_obj",
                    data: pop_obj
                  });
                } else {
                  // 不显示弹窗
                  that.show_model = false;
                }
              } else {
                // 没有缓存的情况下
                let pop_obj = {};
                arr.forEach((item, index) => {
                  item.show = false;
                  item.i = index;
                });
                // 优先展示第一个弹窗
                arr[0]["show"] = true;
                that.window_arr = arr;
                that.show_model = true;
                // 存入缓存
                that.window_arr.forEach(item => {
                  pop_obj[item.id] = new Date().getDate();
                });
                wx.setStorage({
                  key: "pop_obj",
                  data: pop_obj
                });
              }
            }
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      );
    },
    // 关闭弹窗
    close (item) {
      if (item.i == this.window_arr.length - 1) {
        this.show_model = false;
        return false;
      }
      this.window_arr[item.i]["show"] = false;
      this.window_arr[item.i + 1]["show"] = true;
    },
    // 获取tab数组
    get_tab () {
      common.fly_post(
        "api/v4_2/project/tab_check",
        {
          tabNum: 1
        },
        result => {
          let res = result.data;
          if (res.status_code == "0") {
            this.tab_arr = res.data;
            //   this.tab_arr.unshift({
            //     id: 0,
            //     value: "精选好店"
            //   })

            if (this.tab_arr.length > 0) {
              this.page = 1;
              this.isbottom = false;
              this.tab_arr[0].active = true;
              this.tab_id = this.tab_arr[0].id;
              this.tab_value = this.tab_arr[0].value;
              // this.get_storelist()
              this.get_projectlist();
            }
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: false, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      );
    },
    // 切换医美板块tab栏
    toggle_tab (item) {
      let that = this;
      if (item.id == 0) {
        this.tab_id = item.id;
        this.tab_value = item.value;
        this.get_storelist();
      } else {
        this.menuFixed = false;
        this.tab_id = item.id;
        this.tab_value = item.value;
        this.isbottom = false;
        this.page = 1;
        this.get_projectlist();
      }
    },
    // 获取项目搜索列表
    get_projectlist () {
      if (this.isbottom) {
        return false;
      }
      wx.showLoading({
        title: "加载中", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/v4_2/project/project_search",
        {
          keyword: this.tab_value,
          lat: this.latitude || 0,
          lng: this.longitude || 0,
          is_dashboard: 1,
          page: this.page,
          pageSize: this.pageSize,
          province_id: this.province_id,
          user_id: wx.getStorageSync("user_id") || 0
        },
        result => {
          let res = result.data;
          if (res.status_code == 0) {
            wx.hideLoading();
            let arr = res.data.data;
            if (this.page == 1) {
              this.mallList = arr;
            } else if (this.page > 1 && arr.length > 0) {
              this.mallList.push(...arr);
            } else if (arr.length == 0 && this.page > 1) {
              this.isbottom = true;
            }
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: false, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      );
    },
    // 搜索关键字
    search_words (item) {
      wx.navigateTo({
        url: "/pages/package_main/search_index/main?keyword=" + item.value
      });
    },
    // 获取生美店铺列表
    get_storelist (obj = {}) {
      wx.showLoading({
        title: "加载中", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/v4_2/life_shop/shop_list",
        {
          key: obj.key || "",
          category_id: obj.category_id || "",
          lng: this.longitude,
          lat: this.latitude,
          page: this.page,
          district_id: obj.district_id || "",
          city_id: obj.city_id || "",
          province_id: this.province_id || "",
          type: obj.type || ""
        },
        result => {
          let res = result.data;
          if (res.status_code == "0") {
            wx.hideLoading();
            let arr = res.data;
            if (arr.length == 0 && this.page > 1) {
              this.isbottom = true;
            } else if (this.page == 1) {
              this.store_arr = arr;
            } else if (arr.length > 0 && this.page > 1) {
              this.store_arr.push(...arr);
            }
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: false, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      );
    },
    // 获取生美筛选列表
    get_storefilter () {
      wx.showLoading({
        title: "加载中", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/v4_2/life_shop/shop_screen",
        {
          province_id: this.province_id
        },
        result => {
          let res = result.data;
          if (res.status_code == "0") {
            wx.hideLoading();
            this.city_arr = res.data.city;
            this.city_selcted = this.city_arr[0];
            this.sort_arr = res.data.order_by;
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: false, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      );
    },
    // 切换城市
    toggle_city (item) {
      this.city_selcted = item;
    },
    // 选择区域
    toggle_area (item) {
      this.area_selected = item;
      this.page = 1;
      this.show_filter = false;
      this.get_storelist({
        city_id: this.city_selcted.id,
        district_id: this.area_selected.id
      });
    },
    // 切换排序
    toggle_sort (item) {
      this.sort_selected = item;
      this.show_filter = false;
      this.page = 1;
      this.get_storelist({
        type: this.sort_selected.id
      });
    },
    // 切换搜索类型
    toggle_filter (type) {
      if (type == 0) {
        //   选择距离最近
        this.show_filter = false;
        this.get_storelist({
          type: 2
        });
      } else {
        this.filter_type = type;
        this.show_filter = true;
      }
    },
    // 关闭筛选
    close_filter () {
      this.show_filter = false;
    },
    to_service () {
      common.to_service()
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: "美美咖+"
    });
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#FF73A4", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    let that = this;
    const updateManager = wx.getUpdateManager();
    updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
      if (res.hasUpdate) {
        // 有版本更新
      }
    });
    updateManager.onUpdateReady(function () {
      wx.showModal({
        title: "更新提示",
        content: "新版本已经准备好，是否重启应用？",
        success: function (res) {
          if (res.confirm) {
            // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
            updateManager.applyUpdate();
          }
        }
      });
    });
    updateManager.onUpdateFailed(function () {
      // 新版本下载失败
      wx.showToast({
        title: "小程序更新失败,请重试", //提示的内容,
        icon: "none", //图标,
        duration: 1500, //延迟时间,
        mask: false, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
    });
    wx.getStorage({
      key: "province_info",
      success: res => {
        let info = JSON.parse(res.data);
        that.province_name = info.province_name;
        that.province_id = info.province_id;
        that.get_location();
      },
      fail: () => {
        that.get_location();
      }
    });
    wx.getStorage({
      key: "user_token",
      success: res => {
        that.get_msg();
      }
    });
    this.get_bg();
    this.getBanner();
    this.getNav();
    this.getadv();
    this.get_window();
    this.get_activity();
  },
  onShow () {
    let that = this;
    wx.setNavigationBarTitle({
      title: "美美咖+"
    });
    wx.setNavigationBarColor({
      frontColor: "#ffffff", //前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000,
      backgroundColor: "#FF73A4", //背景颜色值，有效值为十六进制颜色,
      success: res => { }
    });
    const updateManager = wx.getUpdateManager();
    updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
      if (res.hasUpdate) {
        // 有版本更新
      }
    });
    updateManager.onUpdateReady(function () {
      wx.showModal({
        title: "更新提示",
        content: "新版本已经准备好，是否重启应用？",
        success: function (res) {
          if (res.confirm) {
            // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
            updateManager.applyUpdate();
          }
        }
      });
    });
    updateManager.onUpdateFailed(function () {
      // 新版本下载失败
      wx.showToast({
        title: "小程序更新失败,请重试", //提示的内容,
        icon: "none", //图标,
        duration: 1500, //延迟时间,
        mask: false, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
    });
    wx.getStorage({
      key: "province_info",
      success: res => {
        let info = JSON.parse(res.data);
        if (that.province_id != info.province_id) {
          that.province_name = info.province_name;
          that.province_id = info.province_id;
          that.get_location();
          that.getBanner();
          that.get_activity();
        }
      },
      fail: () => {
        that.get_location();
      }
    });
    wx.getStorage({
      key: "user_token",
      success: res => {
        that.get_msg();
      }
    });
  }
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  margin-bottom: 50px;
  // banner
  .banner {
    height: 137px;
    margin: 58px 10px 0;
    swiper {
      height: 100%;
    }
    .slide-image {
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
  }
  // search Bar
  .searchBar {
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    background: #ff73a4;
    // box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.06);
    display: flex;
    .gps {
      width: 23%;
      height: 100%;
      line-height: 44px;
      display: inline-block;
      font-size: 14px;
      color: #fff;
      padding-left: 12px;
      font-weight: 700;
      font-family: "Regular";
      margin-right: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      .img {
        width: 22px;
        height: 22px;
        display: inline-block;
        vertical-align: middle;
      }
    }
    .msg {
      position: relative;
      margin: 0 10px;
      width: 40px;
      .img {
        width: 26px;
        height: 26px;
        // margin-top: 5px;
        position: absolute;
        top: 26%;
        left: 20%;
      }
    }
    .content {
      width: 56%;
      height: 32px;
      position: relative;
      // margin: 8px 0 9px 0;
      margin-top: 6px;
      .search-inp {
        width: 100%;
        height: 32px;
        background: #fff;
        border-radius: 16px;
        display: block;
        margin: 0 auto;
        box-sizing: border-box;
        padding-left: 35px;
        // opacity: 0.7961;
      }
      .search-icon {
        width: 20px;
        height: 20px;
        display: block;
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        // opacity: 0.31;
      }
    }
  }
  // nav
  .nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    // margin: 0 15px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: padding-box;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
    padding: 0 20px;
    box-sizing: border-box;
    .nav-item {
      padding: 20px 0 13px;
      .image {
        width: 48px;
        height: 48px;
        margin: 0 auto 7px;
        .img {
          width: 100%;
          height: 100%;
          //   border-radius: 50%;
        }
      }
      .nav-msg {
        font-size: 12px;
        font-family: "Regular";
        color: rgba(102, 102, 102, 1);
        text-align: center;
      }
    }
  }
  .line {
    width: 345px;
    height: 1px;
    background: rgba(238, 238, 238, 1);
    margin: 0 auto;
  }
  //   project-class
  .project-class {
    height: auto;
    ._swiper {
      height: 140px !important;
    }
    .list {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .list-item {
        width: 20%;
        float: left;
        .image {
          width: 28px;
          height: 28px;
          display: block;
          margin: 14px auto 8px;
          position: relative;
          .img {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }

        .msg {
          height: 17px;
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 17px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          margin-bottom: 6px;
        }
      }
    }
    .indicator-dots {
      margin: 14pt 0 20pt;
      height: 3px;
      position: relative;
      .indicators {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .indicator-point {
          width: 10px;
          height: 4px;
          background: rgba(237, 237, 237, 1);
          border-radius: 2px;
          display: inline-block;
          vertical-align: middle;
          margin-right: 0;
          &:last-of-type {
            margin-right: 0;
          }
          &.active {
            background: rgba(254, 157, 207, 1);
          }
        }
      }
    }
  }
  // project-nav
  .project-nav {
    display: flex;
    padding: 0 15px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: padding-box;
    .nav-item {
      padding: 15px 0;
      .image {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: 0 auto 8px;
        .img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .nav-msg {
        font-size: 12px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        text-align: center;
      }
    }
  }
  //   beauty-nav
  .beauty-nav {
    padding: 0 15px 15px;
    display: flex;
    justify-content: space-between;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: padding-box;
    .beauty-item {
      width: 48.5%;
      height: 66px;
      border-radius: 4px;
      .img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  // adv
  .adv {
    padding: 10px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: border-box;
    .main-adv {
      width: 345px;
      height: 92px;
      margin: 0 auto;
      display: block;
      border-radius: 50px;
      .image {
        width: 100%;
        height: 100%;
      }
    }
    .advs {
      width: 100%;
      height: 144px;
      box-sizing: border-box;
      margin-top: 8px;
      .adv-item {
        float: left;
        // width:49.5%;
        &:nth-of-type(1) {
          width: 173px;
          height: 100%;
          border-right: 1px solid transparent;
          margin-right: 8px;
        }
        &:nth-of-type(2) {
          width: 173px;
          height: 47.2%;
          border-bottom: 1px solid transparent;
          margin-bottom: 8px;
        }
        &:nth-of-type(3) {
          width: 173px;
          height: 47.2%;
        }
        .image {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
  }
  // activity-unit
  .activity-unit {
    .activity-item {
      padding: 0 15px 0;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      swiper {
        height: 140px;
      }
      .main_adv {
        min-height: 120px;
        .img {
          width: 100%;
          display: block;
        }
      }
      .projects {
        width: 100%;
        padding: 10px 0;
        .list {
          .projects-item {
            margin-right: 10px;
            width: 105px;
            float: left;
            .projects-image {
              width: 105px;
              height: 105px;
              position: relative;
              .img {
                width: 100%;
                height: 100%;
              }
              .tip {
                width: 56px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                font-size: 10px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                position: absolute;
                right: 6px;
                bottom: 6px;
                z-index: 10;
                background: url("https://h5.ameimeika.com/mp_images/mp_2.0/shouye/tag1.png")
                  no-repeat;
                background-size: 100% 100%;
              }
            }
            .projects-name {
              width: 100%;
              font-size: 12px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              line-height: 17px;
              margin-top: 5px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
            .price_projects {
              font-size: 10px;
              font-family: "PingFangSC-Regular";
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              line-height: 12px;
              .tip {
                color: RGBA(255, 56, 62, 1);
              }
            }
            .price_goods {
              line-height: 10px;
              .price-group {
                display: inline-block;
                vertical-align: baseline;
                .icon {
                  display: inline-block;
                  font-size: 8px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: rgba(246, 70, 101, 1);
                  vertical-align: middle;
                  margin-right: 2px;
                  line-height: 8px;
                }
                .num {
                  font-size: 12px;
                  font-family: "Medium";
                  font-weight: 500;
                  color: rgba(246, 70, 101, 1);
                  display: inline-block;
                  vertical-align: middle;
                  line-height: 12px;
                }
              }
              .and {
                display: inline-block;
                font-size: 10px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(68, 68, 68, 1);
                vertical-align: middle;
                margin: 0 3px;
                line-height: 10px;
              }
              .integral-group {
                display: inline-block;
                vertical-align: middle;
                .icon {
                  display: inline-block;
                  font-size: 8px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: rgba(255, 113, 0, 1);
                  vertical-align: baseline;
                  margin-right: 2px;
                }
                .num {
                  font-size: 12px;
                  font-family: "Medium";
                  font-weight: 500;
                  color: rgba(255, 113, 0, 1);
                  display: inline-block;
                  vertical-align: baseline;
                }
              }
            }
          }
        }
      }
    }
  }
  .project-list {
    position: relative;
    padding-bottom: 46px;
    background-color: rgba(243, 244, 246, 1);
    .malltab {
      width: 100%;
      position: -webkit-sticky;
      position: -moz-sticky;
      position: sticky;
      top: 43px;
      z-index: 90;
    }
    .store-filter {
      display: flex;
      padding: 11px 0;
      .filter-item {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFangSC";
        font-weight: 400;
        color: rgba(63, 69, 75, 1);
        line-height: 20px;
        flex: 1;
        text-align: center;
        border-right: 1px solid #e6e6e6;
        &:last-of-type {
          border: none;
        }
      }
    }

    .bottomtext {
      width: 100%;
      height: 60px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(153, 153, 144, 1);
      text-align: center;
      line-height: 60px;
      .line {
        width: 18px;
        height: 1px;
        background-color: #dbdbdb;
        display: inline-block;
        vertical-align: middle;
        &:first-of-type {
          margin-right: 10px;
        }
        &:last-of-type {
          margin-left: 10px;
        }
      }
    }
    .empty {
      .img {
        width: 170px;
        height: 170px;
        display: block;
        margin: 36px auto 0;
      }
      .msg {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 20px;
        text-align: center;
      }
    }
  }
  .character_Medical {
    width: 100%;
    height: 22px;
    margin: 20px auto 0;
    .character_Medical_img {
      width: 96px;
      height: 22px;
      display: block;
      margin: auto;
    }
  }
  // 弹框
  .model {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    .inner {
      display: block;
      width: 300px;
      position: absolute;
      top: 46%;
      left: 50%;
      transform: translate(-50%, -50%);
      .image {
        width: 100%;
      }
      .close {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 1);
        position: absolute;
        bottom: -45px;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        font-size: 16px;
      }
    }
  }
  //   店铺筛选框
  .filter-model {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.6);
    .filter-content {
      width: 100%;
      height: 481px;
      background: rgba(255, 255, 255, 1);
      border-radius: 10px 10px 0 0;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      .filter-top {
        display: flex;
        padding: 23px 0;
        .filter-item {
          font-size: 14px;
          font-family: "PingFangSC-Regular", "PingFangSC";
          font-weight: 400;
          color: rgba(63, 69, 75, 1);
          line-height: 20px;
          flex: 1;
          text-align: center;
          border-right: 1px solid #e6e6e6;
          &:last-of-type {
            border: none;
          }
        }
      }
      .filter-list {
        flex: 1;
        display: flex;
        .list-left {
          flex: 1;
          height: 100%;
          overflow: auto;
          .list-item {
            width: 100%;
            line-height: 40px;
            padding-left: 15px;
            font-size: 14px;
            font-family: P "ingFangSC-Regular", "PingFangSC";
            font-weight: 400;
            color: rgba(29, 32, 35, 1);
            &.active {
              background: rgba(245, 246, 250, 1);
              position: relative;
              &::before {
                content: "";
                width: 3px;
                height: 20px;
                background: rgba(236, 88, 139, 1);
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
              }
            }
          }
        }
        .list-right {
          flex: 1;
          height: 100%;
          overflow: auto;
          background: rgba(245, 246, 250, 1);
          .list-item {
            width: 100%;
            line-height: 40px;
            padding-left: 15px;
            font-size: 14px;
            font-family: "PingFangSC-Regular", "PingFangSC";
            font-weight: 400;
            color: rgba(29, 32, 35, 1);
            &.active {
              color: rgba(236, 88, 139, 1);
            }
          }
        }
      }
    }
  }
  .call {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    // box-shadow: 0px 2px 10px 0px rgba(255, 117, 115, 1);
    position: fixed;
    bottom: 75px;
    right: 12px;
    z-index: 999;
    .image {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 50%;
    }
    .btn {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 20;
      opacity: 0;
    }
  }
}
</style>


